<template>
    <div >
        <div class="img-list">
            <div class="w list">
                <div @click="showPrivece(item)" class="img-item" :key="index" v-for="(item, index) in currentCatData.value">
                    <img v-lazy="`http://47.105.157.158:3000/images/cat/${item.cat}/${item.pathName}`">
                    <div class="img-info">
                        <img v-lazy="item.user.avatar == 'no' ? 'http://47.105.157.158:3000/images/upload/default.jpg' : `http://47.105.157.158:3000/images/upload/${item.user.avatar}`">
                        <span class="info-name">{{item.user.userName}}</span>
                    </div>
                </div>
            </div>
        </div>


        <!-- 预览 -->
        <t-privece 
        @setGuanzhuData="setGuanzhuData($event)"
        @newCurrentDianzanData="newCurrentDianzanData($event)" 
        @newPriveceData="newPriveceData($event)" 
        @setCurrentPriveceImg="setCurrentPriveceImg($event)" :currentPriveceData="currentPriveceData" 
        @closePrivece="closePrivece($event)" v-if="isShowPrivece"></t-privece>
    </div>
</template>

<script>
import { inject, ref, provide } from '@vue/composition-api';
import Privece from '../global/Privece';
export default {
    components: {
        't-privece': Privece
    },
    setup() {

        // 接受父组件的当前分类数据
        const currentCatData = ref(inject('currentData'));
    

        // 显示与隐藏预览窗口
        const isShowPrivece = ref(false);
        // 当前预览的数据
        const currentPriveceData = ref('');
        // 显示预览窗口
        const showPrivece = function (item) {
            isShowPrivece.value = true;
            // 把当前数据传递给预览窗口显示
            currentPriveceData.value = item;
        }

        // 隐藏预览窗口
        const closePrivece = function (e) {
            isShowPrivece.value = e;
        }

        // 设置当前预览内部，被点击的图片显示
        const setCurrentPriveceImg = function (e) {
            currentPriveceData.value = e;
        }

        // 设置评论后的新数据
        const newPriveceData = function (e) {
            currentPriveceData.value = e;
        }

        // 更新点赞后的图片数据
        const newCurrentDianzanData = function (e) {
            currentPriveceData.value = e;
        }

        // 设置关注后的数据
        const setGuanzhuData = function (e) {
            currentPriveceData.value.user = e;
        }




        // 方法区
        const methods = 
        { 
            showPrivece, 
            closePrivece, 
            setCurrentPriveceImg, 
            newPriveceData,
            newCurrentDianzanData,
            setGuanzhuData,
        }

        return {
            ...methods,
            currentCatData,
            isShowPrivece,
            currentPriveceData
        }
    }
}
</script>

<style lang="less" scoped>

.img-list {
    margin-top: 60px;
    .list {
        columns: 4;
        column-gap: 8px;
        .img-item {
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            margin-bottom: 20px;
            cursor: pointer;
            box-shadow: 0 0 10px #ccc;
            transition: all .6s;
            padding-bottom: 10px;
            break-inside: avoid;
            &:hover {
                box-shadow: 0 10px 10px #ccc;
            }
            img {
                width: 100%
            }
            .img-info {
                padding: 0 10px;
                .info-title {
                    display: block;
                    height: 36px;
                    line-height: 36px;
                    font-size: 14px;
                    border-bottom: 1px solid #eee;
                }
                img {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    margin: 10px 20px 10px 0;
                    vertical-align: middle;
                }
                .info-name {
                    font-size: 12px;
                    color: #9d7c6d;
                }
            }
        }
    }
}
</style>